<template>
  <div class="play" v-show="this.isShow.isPLShow">
    <div class="coverTip">
      <div class="cInner">
        <div class="ctipbox">
          <div class="ctip1"></div>
          <div class="dongqiubg"></div>
          <div class="dongqiu"></div>
          <div class="ctipbtn"></div>
        </div>

        <div class="djs">
          <div class="djstip tip3"></div>
          <div class="djstip tip2"></div>
          <div class="djstip tip1"></div>
          <div class="djstip tipgo"></div>
        </div>

        <div class="result-box">
          <div class="tip-result"></div>
          <div class="tip-text">
            <input type="text" id="myNickname" placeholder="点击输入姓名" />
          </div>
          <div class="tip-result-btn" @click="submitData"></div>
        </div>
      </div>
    </div>
    <div class="gamewrapper" id="gamewrapper">
    </div>
    <div class="audiobox">
      <audio :src="chuishaoMusic" id="chuishaoMusic" preload="preload"></audio>
      <audio :src="djs3Music" id="djs3Music" preload="preload"></audio>
      <audio :src="djs10Music" id="djs10Music" preload="preload"></audio>
      <audio :src="huanhuMusic" id="huanhuMusic" preload="preload"></audio>
      <audio :src="tiqiuMusic" id="tiqiuMusic" preload="preload"></audio>
      <audio :src="shiwangMusic" id="shiwangMusic" preload="preload"></audio>
    </div>
  </div>
</template>

<script>
import * as PIXI from 'pixi.js';

import $ from "jquery";
var TWEEN = require('@tweenjs/tween.js');

export default {
  name: 'pagePlay',
  data(){
    return{
      bgimg:require('./images/bg.jpg'),
      personimg1:require('./images/person-ren1.png'),
      personimg2:require('./images/person-ren2.png'),
      personimg3:require('./images/person-ren3.png'),
      personimg4:require('./images/person-ren4.png'),
      personimg5:require('./images/person-ren5.png'),
      personqiuimg1:require('./images/person-qiu-ren1.png'),
      personqiuimg2:require('./images/person-qiu-ren2.png'),
      personqiuimg3:require('./images/person-qiu-ren3.png'),
      personqiuimg4:require('./images/person-qiu-ren4.png'),
      personqiuimg5:require('./images/person-qiu-ren5.png'),
      yaoganbgimg:require('./images/ftbg.png'),
      footballimg:require('./images/football.png'),
      timebgimg:require('./images/timebg.png'),
      tipgoodimg:require('./images/tip-good.png'),
      tipbadimg:require('./images/tip-bad.png'),
      tipbadimg2:require('./images/tip-bad2.png'),
      fenbgimg:require('./images/fenbg.png'),
      personsmyimg:require('./images/person-smy.png'),
      qiumenimg:require('./images/qiumen.png'),
      bgguang1img:require('./images/bgguang1.png'),
      bgguang2img:require('./images/bgguang2.png'),
      zhizhenimg:require('./images/jiantou.png'),
      startPosX:0,
      startPosY:0,
      footballX:0,
      footballY:0,
      football:null, //足球精灵
      footballqiu:null,
      person:null,    //守门员精灵
      goodtip:null,
      badtip:null,
      badtip2:null,
      message3:null, //记分牌
      personsmy:null, //守门员身体触碰区域
      huanhu:null, //欢呼
      qiuyuanpersonqiu:null, //守门员怀里的球
      qiumenqiu:null, //球门里的球
      zhizhen:null, //指针
      bgguang2:null, //欢呼
      bgguangflag2:null,
      qiuyuanperson:null,
      ftradius:59,  //球半径
      ygcenterX:315+59, //球中心点X
      ygcenterY:945+59, //球中心点Y
      yaoRadius:137,  //摇杆底部半径
      isOK:true,   //是否可以颠球
      isPlay:false,   //是否可以开始游戏，最初判断
      footballPosX:315, //球X坐标
      footballPosY:945, //球Y坐标
      state:null,
      vx:1, //守门员移动速度
      vxvale:1, //速度
      screenHeight:1206, //屏幕高
      srccenWidth:750, //屏幕宽
      resetCj:null,
      gametime:30,  //总游戏时长
      allsendNum:0,  //总踢球数
      successNum:0, //踢进的球个数
      qiuScale:0.4,
      addCanvasBox:true,
      chuishaoMusic:'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/tuishao.mp3',
      djs3Music:'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/djs.mp3',
      djs10Music:'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/djs2.mp3',
      huanhuMusic:'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/huanhu.mp3',
      tiqiuMusic:'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/tiqiu.mp3',
      shiwangMusic:'https://www.jiandoukeji.com/h5/2018/youku/fbgame/mp3/shiwang.mp3',
      chuishaoMusicObj:null,
      djs3MusicObj:null,
      djs10MusicObj:null,
      huanhuMusicObj:null,
      tiqiuMusicObj:null,
      shiwangMusicObj:null,
      minPos:0,
      maxPos:475,
      midPos:240,
      wt:60,
      min:0,
      max:475,
      perwho:1, //哪个球员序列号1-5
    }
  },
  props: {
    isShow: {
      type: Object
    },
    // 游戏启动
    start: {
      type: Boolean
    }
  },
  mounted:function(){
    let _this=this
    this.tiao()
    function orientationChange () {
      switch (window.orientation) {
        case -90:
        case 90:
          break
        case 0:
        case 180:
          setTimeout(function(){
            _this.tiao()
          },200)
          break
      }
    }
    //window.onorientationchange = orientationChange
    $(window).on('orientationchange',orientationChange)

    this.chuishaoMusicObj = document.getElementById('chuishaoMusic')
    this.playYy(this.chuishaoMusicObj)
    setTimeout(()=>{
      _this.pauseYy(this.chuishaoMusicObj)
    },200)

    this.djs3MusicObj = document.getElementById('djs3Music')
    this.playYy(this.djs3MusicObj)
    setTimeout(()=>{
      _this.pauseYy(this.djs3MusicObj)
    },200)

    this.djs10MusicObj = document.getElementById('djs10Music')
    this.playYy(this.djs10MusicObj)
    setTimeout(()=>{
      _this.pauseYy(this.djs10MusicObj)
    },200)

    this.huanhuMusicObj = document.getElementById('huanhuMusic')
    this.playYy(this.huanhuMusicObj)
    setTimeout(()=>{
      _this.pauseYy(this.huanhuMusicObj)
    },200)

    this.tiqiuMusicObj = document.getElementById('tiqiuMusic')
    this.playYy(this.tiqiuMusicObj)
    setTimeout(()=>{
      _this.pauseYy(this.tiqiuMusicObj)
    },200)

    this.shiwangMusicObj = document.getElementById('shiwangMusic')
    this.playYy(this.shiwangMusicObj)
    setTimeout(()=>{
      _this.pauseYy(this.shiwangMusicObj)
    },200)


  },
  watch:{
    start:function(){
      if(this.start){
        this.huanhu.visible=false
      }
    }
  },
  methods: {
    playYy:function(obj){
      obj.play()
      document.addEventListener('WeixinJSBridgeReady', function () {
        obj.play()
      }, false)
    },
    pauseYy:function(obj){
      obj.pause()
      document.addEventListener('WeixinJSBridgeReady', function () {
        obj.pause()
      }, false)
    },
    result:function(s1){
      this.successNum=s1

      $('.coverTip').show()
      $('.result-box').show()
    },
    submitData:function(){
      let nick=document.getElementById('myNickname').value
      let _this=this


      if(nick!=''){
        var _url='https://www.jiandoukeji.com/codes/jiandou/game.php/Home/Words/JDOU_words/';
        var _data={
        'text':nick
        };
        $.ajax({
            url:_url,
            type:'POST',
            data:_data,
            dataType:'json',
            success:function(json){
                let msginfo=json.msg;
                let snick=msginfo.slice(0,5)

                let msg={
                      allnull:_this.allsendNum,
                      successnum:_this.successNum,
                      nickname:snick,
                      per:'65%'
                  }
                _this.$emit('sendData', msg)
                _this.$emit('toFN')
                $('#myNickname').blur()
            }
        });

      }else{
        alert('请填写昵称')
      }
    },
    tiao:function(){
      let _w=$(window).width()
      let _h=$(window).height()
      if(_h>_w){
        if(this.addCanvasBox){
          this.addCanvasBox=false
          $('.hello').css({'width':_w+'px','height':_h+'px'})
          this.gameInit(_w,_h)
        }
      }
    },
    nextToFN () {
      this.$emit('toFN')
    },
    // 游戏结果为 msg {Object}
    send (msg) {
      this.$emit('sendData', msg)
    },

    sendQiu:function(){
      this.playYy(this.tiqiuMusicObj)

      //球飞出
      this.personMove()
      TWEEN.update()

      //守门员是否挡住球
      if (this.hitTestRectangle(this.football, this.personsmy)) {
        //接触
        this.state=this.catchQiu
      }else{
        //未接触
        this.nocatchQiu()
      }
    },
    nocatchQiu:function(){
      //判断是否进入球门
      let nowQiuX=this.football.x
      let nowQiuY=this.football.y

      if((nowQiuX>86)&&(nowQiuX<541)&&(nowQiuY>246)&&(nowQiuY<354)){
        //进球啦！
        this.state=this.goal
      }else{

        //球飞出
        if((nowQiuX>750-this.ftradius*2)||(nowQiuX<0)||(nowQiuY>this.screenHeight*2)||(nowQiuY<-this.ftradius*2)){
          //已确认球飞出屏幕
          this.goodtip.visible=false
          this.badtip.visible=true
          this.badtip2.visible=false
          this.playYy(this.shiwangMusicObj)
          this.oneGameEnd()
        }
      }
    },
    oneGameEnd:function(){

      let _this=this

      //重置一次游戏
      if(!this.isPlay){
        _this.resetCj=setTimeout(function(){
          clearTimeout(_this.resetCj)


          _this.badtip.visible=false
          _this.badtip2.visible=false
          _this.goodtip.visible=false

          //_this.huanhu.visible=false
          _this.qiuyuanpersonqiu.visible=false
          _this.qiuyuanperson.visible=true
          _this.qiumenqiu.visible=false

          clearInterval(_this.bgguangflag2)
        },1500)

        _this.isPlay=true

        _this.football.x=_this.footballPosX
        _this.football.y=_this.footballPosY
        _this.football.scale.x=1
        _this.football.scale.y=1
        _this.zhizhen.rotation=0

        if(_this.gametime<=0){
          _this.state=_this.gameEnd
        }else{
          _this.state=_this.personMove
        }
      }

    },
    goal:function(){
      let _this=this

      this.playYy(this.huanhuMusicObj)

      //球进入球门
      this.goodtip.visible=true
      this.badtip.visible=false
      this.badtip2.visible=false
      this.qiumenqiu.visible=true
      //this.huanhu.visible=true

      let step=20

      this.bgguangflag2=setInterval(()=>{
        if(_this.qiumenqiu.y<390){
        _this.qiumenqiu.y=_this.qiumenqiu.y+step
        }
        if(this.bgguang2.visible){
          this.bgguang2.visible=false
        }else{
          this.bgguang2.visible=true
        }
      },20)

      /*console.log('x: '+_this.qiumenqiu.x+'y: 410,scaleX:'+_this.qiuScale+',scaleY:'+_this.qiuScale)
      var tween = new TWEEN.Tween(this.qiumenqiu)
      .to({y: 900},200)
      .onComplete(function() {});
      tween.start();*/



      /*
      this.football.visible=true
      this.football.scale.x=this.qiuScale
      this.football.scale.y=this.qiuScale
      */

      this.qiumenqiu.x=this.football.x
      this.qiumenqiu.y=this.football.y

      this.successNum++
      //进球加分
      let scroe=parseInt(this.successNum)

      if(scroe<10){
        this.message3.text='0'+scroe
      }else{
        this.message3.text=scroe
      }

      this.oneGameEnd()
    },
    catchQiu:function(){
      this.playYy(this.shiwangMusicObj)
      //守门员捕捉到了球
      this.goodtip.visible=false
      this.badtip.visible=false
      this.badtip2.visible=true

      this.qiuyuanpersonqiu.visible=true
      this.qiuyuanperson.visible=false

      /*this.football.visible=true
      this.football.scale.x=this.qiuScale
      this.football.scale.y=this.qiuScale

      //球进入守门员怀里

      let pX=this.person.x
      let pY=this.person.y

      this.football.x=pX+80
      this.football.y=pY+80
      */
      this.oneGameEnd()
    },
    footballFly:function(x1,y1,x2,y2){
      this.allsendNum++
      //踢球
      let mbPointer=this.getSquPoints(x1,y1,x2,y2)

      let liX=Math.abs(x1-x2)
      let liY=Math.abs(y1-y2)
      let lidu=Math.sqrt(liX*liX+liY*liY)

      let v=0.2


      if((lidu>90)&&(lidu<120)){
        v=0.4
      }

      if(lidu>=120){
        v=0.6
      }

      let tweenTime=lidu/v

      //球移动
      let _this=this
      var tween = new TWEEN.Tween(this.football)
      .to({x: mbPointer[0], y: mbPointer[1],scaleX:_this.qiuScale,scaleY:_this.qiuScale},tweenTime)
      .onComplete(function() {
        _this.football.x =_this.footballPosX
        _this.football.y =_this.footballPosY
        _this.football.scale.x=1
        _this.football.scale.y=1

      });
      tween.start();

      var tween2 = new TWEEN.Tween(this.footballqiu)
      .to({rotation: 360},tweenTime)
      .onComplete(function() {
        _this.footballqiu.rotation =0
      });
      tween2.start();

      this.state=this.sendQiu




    },
    getSquPoints:function(x1,y1,x2,y2){
      //判断与正方形的四条线中，哪根线有交点
      //特殊 x坐标一样
      if((x1==x2)&&(y1==y2)){
        return [x1,y1]
      }

      if(x1==x2){
        if(y2>y1){
          return [x1,0-this.ftradius*2]
        }else{
          return [x1,this.screenHeight+this.ftradius*2]
        }
      }

      //特殊 y坐标一样
      if(y1==y2){
        if(x1<x2){
          return [0-this.ftradius*2,y1]
        }else{
          return [750+this.ftradius*2,y1]
        }
      }

      //左右线
      let myx=0
      let myy=0
      if(x1<x2){
        //与左侧线有交点
        myx=0-this.ftradius*2

        let tempY=(Math.abs(y2-y1)/Math.abs(x2-x1))*x2
        if(y1>y2){
          //向下发射
          myy=y2+tempY

          if(myy>this.screenHeight){
            myx=x1*(myy-this.screenHeight*2)/(myy-y1)
            myy=this.screenHeight*2+this.ftradius*2
          }
        }else{
          //向上发射
          myy=y2-tempY
          if(myy<0){
            myx=x1*Math.abs(myy)/(y1+Math.abs(myy))
            myy=0-this.ftradius*2
          }
        }
      }else{
        //与右侧线有交点
        myx=750+this.ftradius*2

        let tempY=(Math.abs(y2-y1)/Math.abs(x2-x1))*(750-x2)
        if(y1>y2){
          //向下发射
          myy=y2+tempY

          if(myy>this.screenHeight){
            myx=750-(750-x1)*(myy-this.screenHeight*2)/(myy-y1)
            myy=this.screenHeight*2+this.ftradius*2
          }
        }else{
          //向上发射
          myy=y2-tempY

          if(myy<0){
            myx=750-(750-x1)*Math.abs(myy)/(y1+Math.abs(myy))
            myy=0-this.ftradius*2
          }
        }
      }





      //计算交点坐标

      return [myx,myy]
    },
    resetFootball:function(){
      //足球重新放置原点
      //球归原点
      this.football.x=this.footballPosX
      this.football.y=this.footballPosY
    },
    personMove:function(){
      //守门员移动 左右移动范围
      let sudu=this.randomNumSSS(1,5)

      let pos=this.person.x+this.vx





      if(pos<this.min){
        this.personFanweiMax()
        pos=this.min
        this.vxvale=sudu
        this.vx = this.vxvale;
      }

      if(pos>this.max){
        this.personFanweiMin()
        pos=this.max
        this.vxvale=sudu
        this.vx = -this.vxvale;
      }

      //移动吧，我的守门员
      this.person.x =pos;
      this.personsmy.x=pos+98
    },
    personFanweiMax:function(){
      let rand=this.randomNumSSS(1,5)

      this.max=this.randomNum((this.midPos+this.wt),this.maxPos)

      if(rand==4){
        this.max=this.midPos
      }
    },
    personFanweiMin:function(){
      let rand=this.randomNumSSS(1,5)

      this.min=this.randomNum(this.minPos,(this.midPos-this.wt))

      if(rand==2){
        this.min=this.midPos
      }
    },
    randomNum:function(min,max){
      return Math.floor(Math.random()*(max-min+1)+min)
      //return Math.floor(Math.random()*max+min)
    },
    randomNumSSS:function(min,max){
      //return Math.floor(Math.random()*(max-min+1)+min)
      return Math.floor(Math.random()*max+min)
    },
    footballtouchstart:function(evt){
      if(this.isPlay){
        this.startPosX=evt.data.global.x
        this.startPosY=evt.data.global.y

        this.footballX=this.football.getGlobalPosition().x;
        this.footballY=this.football.getGlobalPosition().y;

        //是否点选了球
        let dur=this.getDistance(this.startPosX,this.startPosY,this.ftradius)
        if(dur<this.ftradius){
          //点的是球
          this.isOK=true
        }else{
          //不是球
          this.isOK=false
        }
      }
    },
    footballtouchmove:function(evt){

      if(this.isPlay&&this.isOK){
        let _x=evt.data.global.x
        let _y=evt.data.global.y

        this.footballPos(_x,_y)
      }

    },
    footballPos:function(_x,_y){
      if(this.startPosX!=undefined){

          let posX=_x-this.startPosX
          let posY=_y-this.startPosY

          //判断是否超出范围
          let ftNowX=this.footballX+posX
          let ftNowY=this.footballY+posY

          let ftcX=ftNowX+this.ftradius
          let ftcY=ftNowY+this.ftradius

          //let dur=this.getDistance(ftcX,ftcY,this.yaoRadius)
          let rDurX=Math.abs(ftcX-this.ygcenterX)
          let rDurY=Math.abs(ftcY-this.ygcenterY)
          let dur=Math.sqrt(rDurX*rDurX+rDurY*rDurY)

          if(dur>this.yaoRadius){
            //范围外

            var ans=this.getPoint(this.ygcenterX,this.ygcenterY,this.yaoRadius,this.ygcenterX,this.ygcenterY,ftcX,ftcY);
            let jx=0
            let jy=0


            //圆与直线有两个交点，计算出离手指最近的交点
            if(Math.sqrt((ans[0]-_x)*(ans[0]-_x)+(ans[1]-_y)*(ans[1]-_y))<Math.sqrt((ans[2]-_x)*(ans[2]-_x)+(ans[3]-_y)*(ans[3]-_y)))
            {
                jx=ans[0]-this.yaoRadius/2
                jy=ans[1]-this.yaoRadius/2
            }
            else{
                jx=ans[2]-this.yaoRadius/2
                jy=ans[3]-this.yaoRadius/2
            }

            ftNowX=jx;
            ftNowY=jy;

          }

          //this.football.x=ftNowX
          //this.football.y=ftNowY
          this.footballWeizhi(ftNowX,ftNowY)



        }
    },
    footballWeizhi:function(x,y){
      this.football.x=x
      this.football.y=y
		
      let yaogandeg=this.getAngle((x+this.ftradius),(y+this.ftradius),this.ygcenterX,this.ygcenterY)
      this.zhizhen.rotation=(yaogandeg/360)*2*Math.PI
    },
    footballtouchend:function(){

      this.startPosX=0
      this.startPosY=0

      //判断是否执行球飞出
      let fX=this.footballPosX-this.football.x
      let fY=this.footballPosY-this.football.y
      let isFly=Math.sqrt(fX*fX+fY*fY)

      this.isPlay=false
      if(isFly>1){
        //球飞出
        this.footballFly(this.footballPosX,this.footballPosY,this.football.x,this.football.y)
      }else{
        this.football.x=this.footballPosX
        this.football.y=this.footballPosY

        this.isPlay=true
      }
    },
    getDistance:function(x2,y2){
      var _x= Math.abs(this.ygcenterX - x2);
      var _y= Math.abs(this.ygcenterY - y2);
      let dur=Math.pow((_x * _x + _y * _y), 0.5);

      return dur
    },
    getPoint:function(cx, cy, r, stx, sty, edx, edy) {
        var k = (edy - sty) / (edx - stx);
        var b = edy - k * edx;
        var x1, y1, x2, y2;
        var c = cx * cx + (b - cy) * (b - cy) - r * r;
        var a = (1 + k * k);
        var b1 = (2 * cx - 2 * k * (b - cy));

        var tmp = Math.sqrt(b1 * b1 - 4 * a * c);

        x1 = (b1 + tmp) / (2 * a);
        y1 = k * x1 + b;

        x2 = (b1 - tmp) / (2 * a);
        y2 = k * x2 + b;
        return [x1,y1,x2,y2];
    },
    getAngle:function(px,py,mx,my){//获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
        var x = Math.abs(px-mx);
        var y = Math.abs(py-my);
        var z = Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
        var cos = y/z;
        var radina = Math.acos(cos);//用反三角函数求弧度
        var angle = Math.floor(180/(Math.PI/radina));//将弧度转换成角度

        if(mx>px&&my>py){//鼠标在第四象限
            angle = 180 - angle;
        }

        if(mx==px&&my>py){//鼠标在y轴负方向上
            angle = 180;
        }

        if(mx>px&&my==py){//鼠标在x轴正方向上
            angle = 90;
        }

        if(mx<px&&my>py){//鼠标在第三象限
            angle = 180+angle;
        }

        if(mx<px&&my==py){//鼠标在x轴负方向
            angle = 270;
        }

        if(mx<px&&my<py){//鼠标在第二象限
            angle = 360 - angle;
        }



            return angle;
    },
    hitTestRectangle:function(r1, r2) {

      //Define the variables we'll need to calculate
      let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;

      //hit will determine whether there's a collision
      hit = false;

      //Find the center points of each sprite
      r1.centerX = r1.x + r1.width / 2;
      r1.centerY = r1.y + r1.height / 2;
      r2.centerX = r2.x + r2.width / 2;
      r2.centerY = r2.y + r2.height / 2;

      //Find the half-widths and half-heights of each sprite
      r1.halfWidth = r1.width / 2;
      r1.halfHeight = r1.height / 2;
      r2.halfWidth = r2.width / 2;
      r2.halfHeight = r2.height / 2;

      //Calculate the distance vector between the sprites
      vx = r1.centerX - r2.centerX;
      vy = r1.centerY - r2.centerY;

      //Figure out the combined half-widths and half-heights
      combinedHalfWidths = r1.halfWidth + r2.halfWidth;
      combinedHalfHeights = r1.halfHeight + r2.halfHeight;

      //Check for a collision on the x axis
      if (Math.abs(vx) < combinedHalfWidths) {

        //A collision might be occuring. Check for a collision on the y axis
        if (Math.abs(vy) < combinedHalfHeights) {

          //There's definitely a collision happening
          hit = true;
        } else {

          //There's no collision on the y axis
          hit = false;
        }
      } else {

        //There's no collision on the x axis
        hit = false;
      }

      //`hit` will be either `true` or `false`
      return hit;
    },
    gameEnd:function(){
      this.isPlay=false


    },
    gameInit:function(_w,_h){
      this.srccenWidth=_w
      this.screenHeight=_h

      this.min=this.randomNum(this.minPos,(this.midPos-this.wt))
      this.max=this.randomNum((this.midPos+this.wt),this.maxPos)

      let _this=this

      //根据屏幕尺寸，调整球Y坐标
      let weitiao=0

      if(_h>600){
        weitiao=100
      }

      this.footballPosY=(_h-weitiao)*2-this.yaoRadius


      //初始化点位
      this.ygcenterX=this.footballPosX+this.ftradius   //球中心点X
      this.ygcenterY=this.footballPosY+this.ftradius   //球中心点Y



      let canvasH=_h/_w*750

      const app = new PIXI.Application({width:750,height:canvasH});
      document.getElementById('gamewrapper').appendChild(app.view);
      app.stop();

      onAssetsLoaded();

      function onAssetsLoaded(){
        //添加背景球场
        let bgimgorg = PIXI.Texture.fromImage(_this.bgimg)
        var bg = new PIXI.Sprite(bgimgorg)
        bg.x=0
        bg.y=0
        bg.width=750
        bg.height=canvasH //原值1206
        app.stage.addChild(bg)
        bg.interactive = true

        //添加背景观看台
        let bgguang1imgorg = PIXI.Texture.fromImage(_this.bgguang1img)
        var bgguang1 = new PIXI.Sprite(bgguang1imgorg)
        bgguang1.x=0
        bgguang1.y=0
        bgguang1.width=750
        bgguang1.height=386
        app.stage.addChild(bgguang1)

        let bgguang2imgorg = PIXI.Texture.fromImage(_this.bgguang2img)
        _this.bgguang2 = new PIXI.Sprite(bgguang2imgorg)
        _this.bgguang2.x=0
        _this.bgguang2.y=0
        _this.bgguang2.width=750
        _this.bgguang2.height=386
        _this.bgguang2.visible=false
        app.stage.addChild(_this.bgguang2)

        //欢呼的背景
        let textures = [];

        let framekey1 =new PIXI.Texture(bgguang1imgorg);
        textures.push(framekey1);

        let framekey2 =new PIXI.Texture(bgguang2imgorg);
        textures.push(framekey2);

        // create a slow AnimatedSprite
        _this.huanhu = new PIXI.extras.AnimatedSprite(textures);
        _this.huanhu.x=0
        _this.huanhu.y=0
        _this.huanhu.width=750
        _this.huanhu.height=386
        _this.huanhu.animationSpeed=0.5
        _this.huanhu.visible=false
        _this.huanhu.play();
        app.stage.addChild(_this.huanhu);
        app.start();

        //添加球门
        let qiumenimgorg = PIXI.Texture.fromImage(_this.qiumenimg)
        var qiumen = new PIXI.Sprite(qiumenimgorg)
        qiumen.x=0
        qiumen.y=0
        qiumen.width=750
        qiumen.height=738
        app.stage.addChild(qiumen)





        //添加虚拟摇杆
        let yaoganbg= new PIXI.Container();
        yaoganbg.x=_this.ygcenterX-_this.yaoRadius
        yaoganbg.y=_this.ygcenterY-_this.yaoRadius
        yaoganbg.width=_this.yaoRadius*2
        yaoganbg.height=_this.yaoRadius*2
        yaoganbg.visible=false
        app.stage.addChild(yaoganbg)


        let yaoganbgimgorg = PIXI.Texture.fromImage(_this.yaoganbgimg)
        var yaogan = new PIXI.Sprite(yaoganbgimgorg)
        yaogan.x=0
        yaogan.y=0
        yaogan.width=_this.yaoRadius*2
        yaogan.height=_this.yaoRadius*2
        yaoganbg.addChild(yaogan)

        //指针
        let zhizhenimgorg = PIXI.Texture.fromImage(_this.zhizhenimg)
        _this.zhizhen = new PIXI.Sprite(zhizhenimgorg)
        _this.zhizhen.x=_this.yaoRadius-27+25
        _this.zhizhen.y=_this.yaoRadius*2-333+194
        _this.zhizhen.width=55
        _this.zhizhen.height=333
        _this.zhizhen.pivot.set(25, 194)
        yaoganbg.addChild(_this.zhizhen)

        let bv=_w/750
        let ypan=bv*_this.yaoRadius*2
        let ypanX=(_this.ygcenterX-_this.yaoRadius)*bv
        let ypanY=(_this.ygcenterY-_this.yaoRadius)*bv
        $('.dongqiubg').css({'left':ypanX+'px','top':ypanY+'px','width':ypan+'px','height':ypan+'px'})

        let ypanW2=bv*105
        let ypanH2=bv*333
        let ypanX2=(_this.ygcenterX-_this.yaoRadius+85)*bv
        let ypanY2=(_this.ygcenterY-_this.yaoRadius-50)*bv
        let yorgX=53/105
        let yorgY=193/333
        $('.dongqiu').css({'left':ypanX2+'px','top':ypanY2+'px','width':ypanW2+'px','height':ypanH2+'px','transform-origin':yorgX+' '+yorgY})


        //添加球
        _this.football = new PIXI.Container();
        _this.football.x=_this.footballPosX
        _this.football.y=_this.footballPosY
        _this.football.width=_this.ftradius*2
        _this.football.height=_this.ftradius*2
        _this.football.visible=false


        let footballimgorg = PIXI.Texture.fromImage(_this.footballimg)
        _this.footballqiu = new PIXI.Sprite(footballimgorg)
        _this.footballqiu.x=_this.ftradius
        _this.footballqiu.y=_this.ftradius
        _this.footballqiu.width=_this.ftradius*2
        _this.footballqiu.height=_this.ftradius*2
        _this.footballqiu.pivot.set(_this.ftradius, _this.ftradius)
        _this.football.addChild(_this.footballqiu)
        app.stage.addChild(_this.football)

        _this.qiumenqiu = new PIXI.Sprite(footballimgorg)
        _this.qiumenqiu.x=_this.ftradius
        _this.qiumenqiu.y=_this.ftradius
        _this.qiumenqiu.width=_this.ftradius*2*_this.qiuScale
        _this.qiumenqiu.height=_this.ftradius*2*_this.qiuScale
        _this.qiumenqiu.visible=false
        app.stage.addChild(_this.qiumenqiu)







        //分数栏
        let fenbgimgorg = PIXI.Texture.fromImage(_this.fenbgimg)
        let fenbg = new PIXI.Sprite(fenbgimgorg)
        fenbg.x=223
        fenbg.y=0
        fenbg.width=313
        fenbg.height=91
        app.stage.addChild(fenbg)

        let style3 = new PIXI.TextStyle({
          fontSize: 52,
          fill: "#ffc600",
        });
        _this.message3 = new PIXI.Text("00",style3);
        _this.message3.x=410
        _this.message3.y=14
        app.stage.addChild(_this.message3);

        //添加倒计时时钟
        let timebgimgorg = PIXI.Texture.fromImage(_this.timebgimg)
        let timebg = new PIXI.Sprite(timebgimgorg)
        timebg.x=0
        timebg.y=23
        timebg.width=237
        timebg.height=52
        app.stage.addChild(timebg)

        let style = new PIXI.TextStyle({
          fontSize: 38,
          fill: "white",
        });
        let message = new PIXI.Text(_this.gametime,style);
        message.x=132
        message.y=26
        app.stage.addChild(message);


        //添加正确提示
        let tipgoodorg = PIXI.Texture.fromImage(_this.tipgoodimg)
        _this.goodtip = new PIXI.Sprite(tipgoodorg)
        _this.goodtip.x=0
        _this.goodtip.y=(_h*2-181)/2
        _this.goodtip.width=750
        _this.goodtip.height=160
        _this.goodtip.visible=false
        app.stage.addChild(_this.goodtip)

        //添加错误提示
        let tipbadorg = PIXI.Texture.fromImage(_this.tipbadimg)
        _this.badtip = new PIXI.Sprite(tipbadorg)
        _this.badtip.x=0
        _this.badtip.y=(_h*2-181)/2
        _this.badtip.width=750
        _this.badtip.height=160
        _this.badtip.visible=false
        app.stage.addChild(_this.badtip)

        //添加错误提示
        let tipbadorg2 = PIXI.Texture.fromImage(_this.tipbadimg2)
        _this.badtip2 = new PIXI.Sprite(tipbadorg2)
        _this.badtip2.x=0
        _this.badtip2.y=(_h*2-181)/2
        _this.badtip2.width=750
        _this.badtip2.height=160
        _this.badtip2.visible=false
        app.stage.addChild(_this.badtip2)


        //添加守门员
        _this.person = new PIXI.Container();
        _this.person.x=241
        _this.person.y=280
        _this.person.width=280
        _this.person.height=251

        _this.perwho=_this.randomNumSSS(1,5)
        let personimgorg=null
        let personqiuimgorg=null

        switch (_this.perwho) {
          case 1:
            personimgorg = PIXI.Texture.fromImage(_this.personimg1)
            personqiuimgorg= PIXI.Texture.fromImage(_this.personqiuimg1)
            break;
          case 2:
            personimgorg = PIXI.Texture.fromImage(_this.personimg2)
            personqiuimgorg= PIXI.Texture.fromImage(_this.personqiuimg2)
            break;
          case 3:
            personimgorg = PIXI.Texture.fromImage(_this.personimg3)
            personqiuimgorg= PIXI.Texture.fromImage(_this.personqiuimg3)
            break;
          case 4:
            personimgorg = PIXI.Texture.fromImage(_this.personimg4)
            personqiuimgorg= PIXI.Texture.fromImage(_this.personqiuimg4)
            break;
          case 5:
            personimgorg = PIXI.Texture.fromImage(_this.personimg5)
            personqiuimgorg= PIXI.Texture.fromImage(_this.personqiuimg5)
            break;
          default:
            personimgorg = PIXI.Texture.fromImage(_this.personimg1)
            personqiuimgorg= PIXI.Texture.fromImage(_this.personqiuimg1)
            break;
        }


        _this.qiuyuanperson = new PIXI.Sprite(personimgorg)
        _this.qiuyuanperson.x=0
        _this.qiuyuanperson.y=0
        _this.qiuyuanperson.width=282
        _this.qiuyuanperson.height=252
        _this.person.addChild(_this.qiuyuanperson)


        let personsmyorg = PIXI.Texture.fromImage(_this.personsmyimg)
        _this.personsmy = new PIXI.Sprite(personsmyorg)
        _this.personsmy.x=98+241
        _this.personsmy.y=47+280
        _this.personsmy.width=84
        _this.personsmy.height=164
        app.stage.addChild(_this.personsmy)

        app.stage.addChild(_this.person)

        //球添加到守门员怀里
        _this.qiuyuanpersonqiu = new PIXI.Sprite(personqiuimgorg)
        _this.qiuyuanpersonqiu.x=0
        _this.qiuyuanpersonqiu.y=0
        _this.qiuyuanpersonqiu.width=282
        _this.qiuyuanpersonqiu.height=252
        _this.qiuyuanpersonqiu.visible=false

        _this.person.addChild(_this.qiuyuanpersonqiu)

        /*
        _this.qiuyuanpersonqiu = new PIXI.Sprite(footballimgorg)
        _this.qiuyuanpersonqiu.x=110
        _this.qiuyuanpersonqiu.y=80
        _this.qiuyuanpersonqiu.width=_this.ftradius*2*_this.qiuScale
        _this.qiuyuanpersonqiu.height=_this.ftradius*2*_this.qiuScale
        _this.qiuyuanpersonqiu.visible=false

        _this.person.addChild(_this.qiuyuanpersonqiu)
        */

        //绑定虚拟摇杆事件，touchstart touchmove touchend
        bg.on('pointerdown',_this.footballtouchstart)
          .on('pointermove',_this.footballtouchmove)
          .on('pointerup',_this.footballtouchend)




        _this.state=_this.personMove


        //昵称输入框获得焦点


        //昵称输入框失去焦点
        $('#myNickname').blur(()=>{
          let nick=document.getElementById('myNickname').value

          if(nick!=''){
            var _url='https://www.jiandoukeji.com/codes/jiandou/game.php/Home/Words/JDOU_words/';
                var _data={
                'text':nick
                };
                $.ajax({
                    url:_url,
                    type:'POST',
                    data:_data,
                    dataType:'json',
                    success:function(json){
                        let msg=json.msg;
                        let snick=msg.slice(0,5)
                        document.getElementById('myNickname').value=snick

                    }
                });


          }

        })


        $('.ctipbtn').bind('touchend',()=>{
          //_this.huanhu.visible=false
          _this.bgguang2.visible=false

          $('.ctipbox').hide()

          $('.djs').show()

          $('.djs div').eq(0).show()

          let djstime=0
          let djsflag=null
          _this.playYy(_this.djs3MusicObj)

          djsflag=setInterval(function(){
            djstime++
            $('.djs div').hide()

            $('.djs div').eq(djstime).show()


            if(djstime>=3){
                _this.playYy(_this.chuishaoMusicObj)
            }else{
              _this.playYy(_this.djs3MusicObj)
            }

            if(djstime>3){
                clearInterval(djsflag)
                $('.coverTip').hide()


                _this.football.visible=true
                yaoganbg.visible=true

                //确认可以开始游戏
                _this.isPlay=true

                _this.badtip.visible=false
                _this.badtip2.visible=false
                _this.goodtip.visible=false

                //刷新舞台
                app.ticker.add(delta => gameLoop(delta));

                //let rotatedeg=Math.PI
                //let tdeg=rotatedeg/this.gametime
                let tempjs=_this.gametime
                let flagInterval=null
                flagInterval=setInterval(()=>{
                  tempjs--
                  if(tempjs<10){
                    message.text='0'+tempjs
                  }else{
                    message.text=tempjs
                  }
                  if((tempjs<=10)&&(tempjs>=1)){
                    _this.playYy(_this.djs10MusicObj)
                  }
                  if(tempjs<=0){

                    clearInterval(flagInterval)

                    _this.state=_this.gameEnd


                    //alert('进球：'+parseInt(_this.successNum/91)+'--总踢球个数：'+_this.allsendNum)


                    let qsuccessnum=_this.successNum
                    _this.result(qsuccessnum,)
                  }
                },1000)



            }
          },1000)










        })



        function gameLoop(delta){
          //Update the current game state:
          _this.state(delta);
        }

      }
    }

  }
}
</script>

<style lang="less">
  @import '../../assets/reset.less';
  .gamewrapper{
    width: 100%;
    height: 100%;
    canvas{
      width: 100%;
    }
    background-color: #0e8743;
  }

  .coverTip{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    .cInner{
      position: relative;
      width: 100%;
      height: 100%;
    }
    .ctipbox{
      width: 100%;
      height: 100%;
    }
    .ctip1{
      width: 50vw;
      height: 10vh;
      background-image: url(./images/msg-tip1.png);
      background-size:100% auto;
      background-repeat: no-repeat;
      left: 50%;
      margin-left:-25vw;
      top: 40vh;
      position: absolute;
    }

    .ctipbtn{
      width: 38vw;
      height: 10vh;
      background-image: url(./images/msg-tip1-btn.png);
      background-size:100% auto;
      background-repeat: no-repeat;
      left: 50%;
      margin-left:-19vw;
      top: 48vh;
      position: absolute;
    }

    .dongqiu{
      background-image: url(./images/jiantouqiu.png);
      background-size:100% auto;
      background-repeat: no-repeat;
      position: absolute;
      animation: 2s dongq infinite;
    }

    .dongqiubg{
      background-image: url(./images/ftbg.png);
      background-size:100% auto;
      background-repeat: no-repeat;
      position: absolute;
    }

    .djs{
      display: none;
    }

    .djstip{
      width: 38vw;
      height: 38vw;
      position: absolute;
      left: 50%;
      margin-left:-19vw;
      top: 40vh;
      display: none;
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
    .tip3{
      background-image: url(./images/tip-3.png);
    }
    .tip2{
      background-image: url(./images/tip-2.png);
    }
    .tip1{
      background-image: url(./images/tip-1.png);
    }
    .tipgo{
      background-image: url(./images/tip-go.png);
    }

    .result-box{
      display: none;
    }

    .tip-result{
      width: 60vw;
      height: 10vh;
      background-image: url(./images/tip-reusult1.png);
      background-size:100% auto;
      background-repeat: no-repeat;
      left: 50%;
      margin-left:-30vw;
      top: 30vh;
      position: absolute;
    }

    .tip-text{
      width: 60vw;
      height: 12vw;
      //background-image: url(./images/tip-result2.png);
      //background-size:100% auto;
      //background-repeat: no-repeat;
      left: 50%;
      margin-left:-30vw;
      top: 45vh;
      position: absolute;
      background-color:rgba(255, 255, 255, 0.7);
      border: 1px solid #fff;
      border-radius: 10px;
      box-shadow: 0 0 20px #000;

      input{
        width: 100%;
        height: 100%;
        background: transparent;
        line-height: 11vw;
        text-align: center;
        color: #172c4d;
      }
    }

    .tip-result-btn{
      width: 40vw;
      height: 10vh;
      background-image: url(./images/tip-result3-btn.png);
      background-size:100% auto;
      background-repeat: no-repeat;
      left: 50%;
      margin-left:-20vw;
      top: 60vh;
      position: absolute;
    }
  }

@keyframes dongq {
  0%{ transform: rotate(0deg)}
  25%{ transform: rotate(-50deg)}
  75%{ transform: rotate(50deg)}
  100%{ transform: rotate(0deg)}
}
</style>
